<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            font-size: 12px;
        }
        .u-tablehead {
            border-collapse: collapse;
            border-right: 1px solid #EBEEF7 !important;
            border-left: none !important;
        }
        .u-tablehead2 {
            border-collapse: collapse;
            border-right: 1px solid #666 !important;
            border-left: none !important;
        }
        .umy-table-beyond {
            height: 100%;
            width: 100%;
            background: white;
            position: relative;
        }
        .is-select {
            background: #edeff7;
        }
        .content {
            border: 1px solid #666;
            overflow: hidden;
        }
        .content .cell{
            color: #666;
        }
        .year .cell{
            text-align: center;
        }
        .month .cell{
            text-align: center
        }
        .line {
            border-bottom: 1px solid #fff;
        }
        .normalClass {
            position: absolute;
            z-index: 9;
            height: 100%;
            z-index: 9;
            background-color: #3CDBC4;
            color: #fff;
            top: 0;
            line-height: 25px;
            text-align: right;
            padding-right: 5px;
            font-size: 12px;
        }
        .postponeClass {
            position: absolute;
            z-index: 9;
            height: 100%;
            background-color: #7B89FF;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            top: 0;
            line-height: 25px;
            font-size: 12px;
        }
        .exceedClass {
            position: absolute;
            z-index: 9;
            height: 100%;
            background-color: #4391FA;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            line-height: 25px;
            top: 0;
            font-size: 12px;
        }
        .surpassClass {
            position: absolute;
            z-index: 9;
            height: 24px;
            background-color: #3CDBC4;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            line-height: 25px;
            top: 0;
            font-size: 12px;
        }
        .notStartClass {
            position: absolute;
            z-index: 9;
            height: 24px;
            background-color: #EBEEF7;
            color: #fff;
            text-align: right;
            padding-right: 5px;
            line-height: 25px;
            top: 0;
            font-size: 12px;
        }
        .planClass {
            height: 100%;
            background-color: #EBEEF7;
        }
        .progressbar {
            position: absolute;
            /*top: 40%;*/
            transform: translatey(-40%); /*Y轴方向偏移微调*/
            right: -2px;
            content: '';
            width: 4px;
            /*height: 18px;*/
            background-color: #EFC459;
            height: 100%;
            z-index: 99;
        }
        tr > td {
            word-break: keep-all;
            word-wrap:break-word;
            white-space:nowrap;
        }

        tr > th {
            word-break: keep-all;
            word-wrap:break-word;
            white-space:nowrap;
            overflow:hidden;
        }
        thead tr:first-child th:nth-child(2) .cell {
            color: transparent!important
        }
    </style>
</head>
<body>
<#setting number_format="#">
<table
        cellspacing="0"
        cellpadding="0"
        border="0"
        class="el-table__header"
>
    <thead class="is-group has-gutter">
    <tr class="">
        <#if ganttType == 1>
          <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
              <div title="" class="cell"></div>
          </th>
        </#if>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(218, 224, 237)">
            <div title="" class="cell"></div>
        </th>
        <#list years as yearModel>
            <th class="content year u-tablehead2" colspan="${yearModel.months?size}" rowspan="1" style="background: rgb(218, 224, 237)">
                <div title="" class="cell">${yearModel.year}</div>
            </th>
        </#list>
        <th class="gutter" style="width: 17px"></th>
    </tr>
    <tr class="">
        <#if ganttType == 1>
            <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
                <div title="" class="cell">业务单元</div>
            </th>
        </#if>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell">序号</div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell text-align-center">重点任务</div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell text-align-center">落实举措</div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell">计划开始时间</div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell">计划完成时间</div>
        </th>
        <th class="content" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
            <div title="" class="cell">当前状态</div>
        </th>

        <#list years as yearModel>
            <#list yearModel.months as month>
                <th class="content month u-tablehead2" colspan="1" rowspan="1" style="background: rgb(239, 244, 255)">
                    <div title="" class="cell" style="width: 50px">${month}月</div>
                </th>
            </#list>
        </#list>

        <th class="gutter" style="width: 17px"></th>
    </tr>
    </thead>
    <tbody>
    <#assign dataIndex=0>
    <#list datas as item>
        <#list item.trgNodes as dataModel>
            <#assign dataIndex = dataIndex+1>
            <tr class="el-table__row">
                <#if ganttType == 1>
                    <td
                            rowspan="item.trgNode?size"
                            colspan="1"
                            class="content is-center tablehead text-align-center is-hidden"
                            style="height: 25px;"
                    >
                        <div title="" style="width:74px" class="cell">${dataModel.trgNode}</div>
                    </td>
                </#if>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-center tablehead text-align-center is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell">
                        <div>${dataIndex}</div>
                    </div>
                </td>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-left tablehead text-align-left is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell el-tooltip" >
                  <span data-v-1ccc721d="">
                    ${dataModel.highTask}
                  </span>
                    </div>
                </td>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-center tablehead text-align-left is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell el-tooltip" >
                  <span data-v-1ccc721d="">
                    ${dataModel.taskMod}
                  </span>
                    </div>
                </td>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-center tablehead text-align-center is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell" style="width: 50px">
                        <span data-v-1ccc721d=""> ${dataModel.startDate} </span>
                    </div>
                </td>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-center tablehead text-align-center is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell" style="width: 50px">
                        <span data-v-1ccc721d=""> ${dataModel.endDate} </span>
                    </div>
                </td>
                <td
                        rowspan="1"
                        colspan="1"
                        class="content is-center tablehead text-align-center is-hidden"
                        style="height: 25px"
                >
                    <div title="" class="cell" style="width: 50px">
                        <span data-v-1ccc721d=""> ${dataModel.currentStatus} </span>
                    </div>
                </td>

                <#list years as yearModel>
                    <#list yearModel.months as month>

                        <td
                                rowspan="1"
                                colspan="1"
                                class="line is-center u-tablehead"
                                style="height: 25px;"
                        >
                            <div title="" class="cell umy-table-beyond" style="width: 50px;">
                                <#if curDate == (yearModel.year + '-' + month)>
                                    <div class="progressbar"></div>
                                </#if>
                                <#--                  <div v-if='getSection(item.year,it,scope.row.startDate,scope.row.endDate)' class='planClass'></div>-->
                                <!-- 正常进行 -->
                                <div title=""
                                        <#if dataModel.startDate==''>
                                    class=""
                                <#elseif dataModel.endDate==''>
                                    class=""
                                <#elseif ((yearModel.year + month)?number >= dataModel.startDate?replace("-","")?number) && ((yearModel.year +  month)?number <= dataModel.endDate?replace("-","")?number)>
                                    class="planClass"
                                <#else>
                                    class=""
                                        </#if>>
                                </div>
                                <#if dataModel.startDate == (yearModel.year + '-' + month)
                                && dataModel.currentStatus == '正常进行'
                                && dataModel.progressPercentage != '' && dataModel.progressPercentage != '100'>
                                    <#if dataModel.progressPercentage==null>
                                        <#assign progressPercentage=0>
                                    <#elseif dataModel.progressPercentage==''>
                                        <#assign progressPercentage=0>
                                    <#else>
                                        <#assign progressPercentage=dataModel.progressPercentage?number>
                                    </#if>
                                    <#assign progressBarLength=(51*(dataModel.endDate[0..3]?number *12 + dataModel.endDate[5..6]?number - dataModel.startDate[0..3]?number *12 - dataModel.startDate[5..6]?number + 1))*(progressPercentage/100)>
                                    <#if progressBarLength < 12>
                                        <#assign progressBarLength=6>
                                    </#if>
                                    <div style="width: ${progressBarLength}px; " class='normalClass'>
                                        <#if progressBarLength < 12>
                                            <span style="position: relative;left: 30px;color: #666;background: #EBEEF7;">${ dataModel.progressPercentage }%</span>
                                        <#else>
                                            <span>${ dataModel.progressPercentage }%</span>
                                        </#if>
                                    </div>
                                </#if>
                                <!-- 延迟 -->
                                <#if dataModel.startDate == (yearModel.year + '-' + month)
                                && dataModel.currentStatus == '延期进行'
                                && dataModel.progressPercentage != '' && dataModel.progressPercentage != '100'>
                                    <#if dataModel.progressPercentage==null>
                                        <#assign progressPercentage=0>
                                    <#elseif dataModel.progressPercentage==''>
                                        <#assign progressPercentage=0>
                                    <#else>
                                        <#assign progressPercentage=dataModel.progressPercentage?number>
                                    </#if>
                                    <#assign progressBarLength=(51*(dataModel.endDate[0..3]?number *12 + dataModel.endDate[5..6]?number - dataModel.startDate[0..3]?number *12 - dataModel.startDate[5..6]?number + 1))*(progressPercentage/100)>
                                    <#if progressBarLength < 12>
                                        <#assign progressBarLength=6>
                                    </#if>
                                    <div style="width: ${progressBarLength}px; " class='postponeClass'>
                                        <#if progressBarLength < 12>
                                            <span style="position: relative;left: 30px;color: #666;background: #EBEEF7;">${ dataModel.progressPercentage }%</span>
                                        <#else>
                                            <span>${ dataModel.progressPercentage }%</span>
                                        </#if>
                                    </div>
                                </#if>
                                <!-- 超前 -->
                                <#if dataModel.startDate == (yearModel.year + '-' + month)
                                && dataModel.currentStatus == '超额推进'
                                && dataModel.progressPercentage != '' && dataModel.progressPercentage != '100'>
                                    <#if dataModel.progressPercentage==null>
                                        <#assign progressPercentage=0>
                                    <#elseif dataModel.progressPercentage==''>
                                        <#assign progressPercentage=0>
                                    <#else>
                                        <#assign progressPercentage=dataModel.progressPercentage?number>
                                    </#if>
                                    <#assign progressBarLength=(51*(dataModel.endDate[0..3]?number *12 + dataModel.endDate[5..6]?number - dataModel.startDate[0..3]?number *12 - dataModel.startDate[5..6]?number + 1))*(progressPercentage/100)>
                                    <#if progressBarLength < 12>
                                        <#assign progressBarLength=6>
                                    </#if>
                                    <div style="width: ${progressBarLength}px; " class='exceedClass'>
                                        <#if progressBarLength < 12>
                                            <span style="position: relative;left: 30px;color: #666;background: #EBEEF7;">${ dataModel.progressPercentage }%</span>
                                        <#else>
                                            <span>${ dataModel.progressPercentage }%</span>
                                        </#if>
                                    </div>
                                </#if>
                                <!-- 已完成 -->
                                <!-- <div v-if="getOver(item,it,scope.row.startDate,scope.row.currentStatus,'已完成', scope.row.progressPercentage)" :style="{width: '49px', right: (49*(getMonths(getNow(),scope.row.startDate) -1)) + 'px'}" class="surpassClass"><span>{{scope.row.progressPercentage + '%'}}</span></div> -->
                                <#if dataModel.startDate == (yearModel.year + '-' + month)
                                && dataModel.currentStatus == '已完成'
                                && dataModel.progressPercentage != '' && dataModel.progressPercentage == '100'>
                                    <#if dataModel.progressPercentage==null>
                                        <#assign progressPercentage=0>
                                    <#elseif dataModel.progressPercentage==''>
                                        <#assign progressPercentage=0>
                                    <#else>
                                        <#assign progressPercentage=dataModel.progressPercentage?number>
                                    </#if>
                                    <#assign progressBarLength=(51*(dataModel.endDate[0..3]?number *12 + dataModel.endDate[5..6]?number - dataModel.startDate[0..3]?number *12 - dataModel.startDate[5..6]?number + 1))*(progressPercentage/100)>
                                    <#if progressBarLength < 12>
                                        <#assign progressBarLength=6>
                                    </#if>
                                    <div style="width: ${progressBarLength}px; " class='surpassClass'>
                                        <#if progressBarLength < 12>
                                            <span style="position: relative;left: 30px;color: #666;background: #EBEEF7;">${ dataModel.progressPercentage }%</span>
                                        <#else>
                                            <span>${ dataModel.progressPercentage }%</span>
                                        </#if>
                                    </div>
                                </#if>
                                <!-- 未启动 -->
                                <#if dataModel.startDate == (yearModel.year + '-' + month)
                                && dataModel.currentStatus == '未启动'
                                && (dataModel.progressPercentage == '' || dataModel.progressPercentage == '0' || dataModel.progressPercentage == null)>
                                    <div style="width: 0px; " class='notStartClass'>
                                        <span style="position: relative;left: 30px;color: #666;background: #EBEEF7;">${ dataModel.progressPercentage }%</span>
                                    </div>
                                </#if>
                            </div>
                        </td>
                    </#list>
                </#list>
            </tr>
        </#list>
    </#list>
    </tbody>
</table>
</body>
</html>
